<template>
    <section>
        <div class="header">
            <div class="back" @click='back'><i class="el-icon-back"></i></div>
            <div class="title">穷游保险精选</div>
            <div class="search" ><i class="el-icon-search"></i></div>
        </div>
        <div class="pic">
            <div class="ad"></div>
            <div class="process">
                <h3>购买流程</h3>
                <img src="../../assets/insurance/2.png">
            </div>
        </div>
        <div class="nav">
            <div class="row1">
                <router-link to="">境外旅游</router-link>
                <router-link to="">申请签证</router-link>
                <router-link to="">交通意外</router-link>
                <router-link to="">户外运动</router-link>
            </div>
            <div class="row2">
                <router-link to="">境内旅游</router-link>
                <router-link to="">境外自驾</router-link>
                <router-link to="">邮轮旅行</router-link>
                <router-link to="">全年旅行</router-link>
            </div>
        </div>
        <div class="list">
            <h3><span>穷游精选</span><span>更多></span></h3>
            <ul>
                <li v-for="m in 8">
                    <div class="pic"></div>
                    <div class="info">
                        <h6>美亚“万国游踪”全球无忧计划</h6>
                        <p>
                            <span>已售1971件</span>
                            <span><em>150</em>元起</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </section>


</template>

<script type="text/javascript">
    export default {
        name:'insurance',
        methods:{
            back(){
                this.$router.push({
                    path:'/'
                })
            }
        }
    }


</script>


<style type="text/css" lang="less">
section{
    .header{
        height: 3em;
        line-height: 3em;
        color:#fff;
        position: fixed;
        top:0;
        left:0;
        right:0;
        background-color: #19c48a;
        font-size: 18px;
        display: flex;
        justify-content: space-around;
    }
    .pic{
        margin-top:3em;
        .ad{
            width: 100%;
            height: 10em;
            background-image: url(../../assets/insurance/1.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .process{
            h3{
                margin-left: 1em;
            }
            img{
                box-sizing: border-box;
                width: 100%;
                padding:0 1em;
            }

        }
    }
    .nav{
        div{
            margin:2em 0;
            display: flex;
            justify-content: space-around;
            a{
                display: inline-block;
                width: 4em;
                height: 3em;
                text-decoration: none;
                color:#fff;
                line-height: 3em;
                border-radius: 2em;
                padding: 0 0.5em;
                background-color:#50c971;
            }
        }
    }
    .list{
        h3{
            margin:0 1em;
            display: flex;
            justify-content: space-between;
            span:last-child{
                color:#50c971;
            }
        }
        ul{
            list-style-type: none;
            padding: 0;
            margin:0;
            li{
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin:2em 0;
                .pic{
                    margin:0;
                    width: 10em;
                    height: 10em;
                    background-image: url(../../assets/insurance/300.jpg);
                    background-repeat:no-repeat;
                    background-position:center;
                    background-size:contain;

                }
                .info{
                    width: 12em;
                    height: 10em;
                    position: relative;

                    h6{
                        margin:0;
                    }
                    p{
                        color: #959595;
                        position: absolute;
                        bottom: 0;
                        span{
                            em{
                                font-size: 2em;
                                color:orange;
                            }
                        }
                    }
                }
            }

        }
    }
}


</style>
